<template>
    <cl-crud ref="Crud">
        <cl-row>
            <!-- 刷新按钮 -->
            <cl-refresh-btn />
            <!-- 新增按钮 -->
            <cl-add-btn />
            <!-- 删除按钮 -->
            <cl-multi-delete-btn />
            <!-- 筛选状态 -->
            <cl-filter label="状态">
                <cl-select prop="status" :options="options.status" />
            </cl-filter>
            <!-- 筛选出租状态 -->
            <cl-filter label="出租状态">
                <cl-select prop="rentalStatus" :options="options.rentalStatus" />
            </cl-filter>
            <cl-flex1 />
            <!-- 关键字搜索 -->
            <cl-search-key placeholder="搜索名称、地址" />
        </cl-row>

        <cl-row>
            <!-- 数据表格 -->
            <cl-table ref="Table" />
        </cl-row>

        <cl-row>
            <cl-flex1 />
            <!-- 分页控件 -->
            <cl-pagination />
        </cl-row>

        <!-- 新增、编辑 -->
        <cl-upsert ref="Upsert" />
    </cl-crud>
</template>

<script lang="ts" name="space-info" setup>
import { useCrud, useTable, useUpsert } from '@cool-vue/crud';
import { useCool } from '/@/cool';
import { reactive } from 'vue';

const { service } = useCool();

// 选项
const options = reactive({
    status: [
        { label: '待租', value: 0, type: 'danger' },
        { label: '已租', value: 1, type: 'success' }
    ],
    rentalStatus: [
        { label: '未出租', value: 0, type: 'danger' },
        { label: '已出租', value: 1, type: 'success' }
    ]
});

// cl-upsert
const Upsert = useUpsert({
    items: [
        {
            label: '名称',
            prop: 'name',
            component: { name: 'el-input', props: { clearable: true } },
            required: true
        },
        {
            label: '地址',
            prop: 'address',
            component: { name: 'el-input', props: { clearable: true } },
            required: true
        },
        {
            label: '省市区',
            prop: 'pca',
            hook: 'pca',
            component: { name: 'cl-distpicker' },
            required: true
        },
        {
            label: '面积',
            prop: 'area',
            hook: 'number',
            component: { name: 'el-input-number' },
            required: true
        },
        {
            label: '楼层',
            prop: 'floor',
            hook: 'number',
            component: { name: 'el-input-number' },
            required: true
        },
        {
            label: '朝向',
            prop: 'orientation',
            component: { name: 'el-input', props: { clearable: true } },
            required: true
        },
        {
            label: '装修',
            prop: 'decoration',
            component: { name: 'el-input', props: { clearable: true } },
            required: true
        },
        {
            label: '价格',
            prop: 'price',
            hook: 'number',
            component: { name: 'el-input-number' },
            required: true
        },
        {
            label: '户型',
            prop: 'layout',
            component: { name: 'el-input', props: { clearable: true } },
            required: true
        },
        {
            label: '状态',
            prop: 'status',
            component: { name: 'el-radio-group', options: options.status },
            value: 0,
            required: true
        },
        {
            label: '备注',
            prop: 'remark',
            component: { name: 'el-input', props: { type: 'textarea', rows: 4 } }
        },
        {
            label: '出租状态',
            prop: 'rentalStatus',
            component: { name: 'el-radio-group', options: options.rentalStatus },
            value: 0,
            required: true
        }
    ]
});

// cl-table
const Table = useTable({
    columns: [
        { type: 'selection' },
        { label: '名称', prop: 'name', minWidth: 140 },
        { label: '地址', prop: 'address', minWidth: 140 },
        {
            label: '省市区',
            prop: 'province',
            minWidth: 160,
            formatter(row) {
                return row.province + '-' + row.city + '-' + row.district;
            }
        },
        { label: '面积', prop: 'area', minWidth: 140 },
        { label: '楼层', prop: 'floor', minWidth: 140 },
        { label: '朝向', prop: 'orientation', minWidth: 140 },
        { label: '装修', prop: 'decoration', minWidth: 140 },
        { label: '价格', prop: 'price', minWidth: 140 },
        { label: '户型', prop: 'layout', minWidth: 140 },
        { label: '状态', prop: 'status', dict: options.status, minWidth: 120 },
        { label: '备注', prop: 'remark', showOverflowTooltip: true, minWidth: 200 },
        { label: '出租状态', prop: 'rentalStatus', dict: options.rentalStatus, minWidth: 120 },
        {
            label: '更新时间',
            prop: 'updateTime',
            minWidth: 170,
            sortable: 'custom',
            component: { name: 'cl-date-text' }
        },
        {
            label: '创建时间',
            prop: 'createTime',
            minWidth: 170,
            sortable: 'desc',
            component: { name: 'cl-date-text' }
        },
        { type: 'op', buttons: ['edit', 'delete'] }
    ]
});

// cl-crud
const Crud = useCrud(
    {
        service: service.space.houseInfo
    },
    (app) => {
        app.refresh();
    }
);

// 刷新
function refresh(params?: any) {
    Crud.value?.refresh(params);
}
</script>
